<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>学生注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid" style="width: 80%;">
    <div class="layui-row">
        <form class="layui-form" style="margin: 0 auto">
            <div class="layui-form-item">
                <label for="L_name" class="layui-form-label">
                    <span class="x-red">*</span>姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_name" name="name" required="" lay-verify="name"
                           autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">
                    <span class="x-red">*</span>密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_pass" name="password" required="" lay-verify="pass" autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">4到16个字符</div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                           autocomplete="off" class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="gender" class="layui-form-label">
                    <span class="x-red">*</span>选择性别</label>
                <div class="layui-input-inline">
                    <select id="gender" name="sex" class="valid">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_telephone" class="layui-form-label">
                    <span class="x-red">*</span>联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_telephone" name="phone" required="" lay-verify="telephone"
                           autocomplete="off" class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="gender" class="layui-form-label">
                    <span class="x-red">*</span>选择学院班级</label>
                <div class="layui-input-inline">
                    <select id="college" name="collegeId" required="" lay-filter="changeCollege" style="margin-bottom: 10px" >
                    </select>
                    <select id="clazz" required="" name="clazzId" >
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">注册</button>
                <a class="layui-btn" lay-filter="" onclick="window.parent.location.reload();">前往登录</a>
            </div>
        </form>
    </div>
</div>
<script>
    var form;
    layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            form = layui.form,
                layer = layui.layer;

            loadClazz();

            //自定义验证规则
            form.verify({
                id: [/r(\d+)$/, 'id必须为r开头'],
                pass: [/(.+){4,16}$/, '密码必须4到16位'],
                repass: function (value) {
                    if ($('#L_pass').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                },
                telephone: [/(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/, "请输入正确的联系电话"]
            });

            //监听提交
            form.on('submit(add)',
                function (data) {
                    //发异步，把数据提交给后端
                    $.ajax({
                        url: '/register',
                        method: 'post',
                        data: data.field,
                        dataType: 'json',
                        success: function (res) {
                            console.log(res)
                            if (res.code == 200) {
                                //弹出提示，并在1秒后关闭当前页面
                                layer.msg("注册成功,您的学号为:" + res.data.sno, function () {
                                    //关闭当前页面
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    //刷新父级页面
                                    window.parent.location.reload();
                                    return false;
                                });
                            } else {
                                layer.msg("注册失败！" + res.msg);
                                return false;
                            }
                        },
                        //请求的页面响应失败，则进行处理：
                        error: function (data) {
                            layer.msg(JSON.stringify(data.field), function () {
                                location.reload();
                            });
                            return false;
                        }
                    })
                    return false;
                });
        });

    $(document).ready(function(){
        $().ready(function () {
            $.ajax({
                type: 'post',
                url: '/getCollege',
                cache: false,
                async: true,
                dataType: 'json',
                success(data) {
                    const list = data.data;
                    let selectProvince= document.getElementById("college");
                    selectProvince.add(new Option("请选择对应的学院","0"))
                    let option=null;
                    for (let i = 0; i < list.length; i++) {
                        option = new Option(list[i].name, list[i].id);
                        selectProvince.add(option)
                    }
                    form.render('select')
                    form.render();
                },
                error() {
                    console.log("进入了error")
                    layer.confirm('省份加载暂时出现了点问题！', {icon: 2, btn: ['好的，回主页吧', '去登陆页'], title: '错误信息'}, function () {
                            window.location.href = '/toIndex'
                        },
                        function () {
                            window.location.href = '/auth/login'
                        })
                }
            })

        })
    });

    //选择城市
    function loadClazz() {
        form.on('select(changeCollege)', function () {
            $("#clazz").html('')
            let collegeId = $("#college option:selected").val();
            //let provinceId = data.val();
            $.ajax({
                type: 'post',
                url: '/getClazz',
                cache: false,
                async: true,
                data: {"id": collegeId},
                dataType: 'json',
                success(data) {
                    const list = data.data;
                    let selectCities = document.getElementById("clazz");
                    selectCities.add(new Option("请选择对应的班级", "0"));
                    let option = null;
                    for (let i = 0; i < list.length; i++) {
                        option = new Option(list[i].clazzName, list[i].id);
                        selectCities.add(option)
                    }
                    form.render('select')
                    form.render();
                },
                error() {
                    console.log("进入了error")
                    layer.confirm('市加载暂时出现了点问题！', {icon: 2, btn: ['好的，回主页吧', '去登陆页'], title: '错误信息'}, function () {
                            window.location.href = '/toIndex'
                        },
                        function () {
                            window.location.href = '/auth/login'
                        })
                }
            })
        })
    }
</script>

</body>

</html>
